<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'Estate')}" />
    <title>集中度预警押品详情</title>
    <asset:stylesheet src="intelligence/swiper.css"/>
    <style>
    .contact-stat{
        padding: 8px 0px;
        text-align: center;
    }
    .contact-stat span{
        font-size: 13px;
        color: #88898c;
        margin-bottom: 10px;
    }
    .contact-stat strong{
        font-size: 13px;
        word-wrap: break-word;
    }
    .nav-tabs{
        border-bottom: none;
    }
    .hpanel > .panel-footer, .hpanel > .panel-section{
        background: #f9f9f9;
    }
    .flex{
        display: flex;justify-content: center;align-items: center;
    }
    .newFontSize{
        font-size: 12px;
    }
    table>tbody>tr>td, table>tbody>tr>th,.table>tfoot>tr>td, table>tfoot>tr>th, table>thead>tr>td, table>thead>tr>th{
        padding: 8px;
        line-height: 1.42857143;
        white-space: nowrap;
    }
    /*轮播图样式*/
    .swiper-container{
        width: 100%;
        height: 300px;
        margin-top: 10px;
    }
    .swiper-pagination-bullet-active{
        opacity: 0.6;
        background: #fff;
    }
    @media (max-width:1654px){
        #screenPage,#screenPage_1{
            height:162px;
        }
    }
    @media (max-width:1382px){
        #screenPage_2{
            height:477px;
        }
    }

    .footer.bg-success {
        background-color: #dff0d8;
    }
    </style>
</head>
<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right navFloatRight">
                <ol class="hbreadcrumb breadcrumb">
                    <li>
                        <span>CINDATA PLS</span>
                    </li>

                    <li class="active">
                        <span>押品信息</span>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

<g:if test="${params?.message}">
    <div class="message alert alert-info" role="status">${params?.message}</div>
</g:if>

<g:if test="${flash.message}">
    <div class="message alert alert-info" role="status">${flash.message}</div>
</g:if>

<div class="content animate-panel">
    %{--押品信息--}%
    <div class="row">
        <div class="hpanel hgreen" style="">
            <div class="panel-heading">
                <div class="panel-tools">

                    <g:if test="${editRoleFlag && this?.collateral?.status != 'Failed'}">
                        <g:link action="estateEdit" id="${this?.estateDetail?.id}" class="btn btn-info btn-xs"><i class="fa fa-edit"></i>编辑</g:link>
                    </g:if>
                    
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                小区信息
            </div>

            <g:if test="${params.id=='1'}">
                <div class="panel-body">
                    <div class="col-md-12 text-center">
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">预警处置 : </small>
                                <span class="unitPrice" style="color: #62CB31">城市占比覆盖率</span>
                            </h3>
                            <p><small style="color: #62CB31">大于30%</small></p>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs text-center">
                                <small style="font-size: 16px;">小区名称 :</small>
                                <span class="">胜古家园</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">小区地址 : </small>
                                <span class="">北京市东城区11号胜古家园</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">总楼栋数 : </small>
                                <span class="unitPrice">5</span>
                                <small class="newFontSize"></small>
                            </h3>

                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">建成年份 : </small>
                                <span class="unitPrice">2000年 </span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                    </div>
                </div>
            </g:if>
            <g:elseif test="${params.id=='2'}">
                <div class="panel-body">
                    <div class="col-md-12 text-center">
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">预警处置 : </small>
                                <span class="unitPrice" style="color: #62CB31">城市占比覆盖率</span>
                            </h3>
                            <p><small style="color: #62CB31">大于30%</small></p>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs text-center">
                                <small style="font-size: 16px;">小区名称 :</small>
                                <span class="">绿港国际商务中心</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">小区地址 : </small>
                                <span class="">北京市顺义区四纬路2号绿港国际商务中心</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">总楼栋数 : </small>
                                <span class="unitPrice">1</span>
                                <small class="newFontSize"></small>
                            </h3>

                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">建成年份 : </small>
                                <span class="unitPrice">2009年 </span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                    </div>
                </div>
            </g:elseif>
            <g:else>
                <div class="panel-body">
                    <div class="col-md-12 text-center">
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">城市占比覆盖率 : </small>
                                <span class="unitPrice" style="color: #62CB31">大于30%</span>
                            </h3>
                            <p><small style="color: #62CB31"></small></p>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs text-center">
                                <small style="font-size: 16px;">小区名称 :</small>
                                <span class="">碧桂园凤凰城凤锦苑</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">小区地址 : </small>
                                <span class="">广东省广州市增城区凤锦苑一街碧桂园凤凰城凤锦苑</span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">总楼栋数 : </small>
                                <span class="unitPrice">28</span>
                                <small class="newFontSize"></small>
                            </h3>

                        </div>
                        <div class="col-md-3" style="width: 20%">
                            <h3 class="font-extra-bold m-b-xs">
                                <small style="font-size: 16px;">建成年份 : </small>
                                <span class="unitPrice">2012年 </span>
                                <small class="newFontSize"></small>
                            </h3>
                        </div>
                    </div>
                </div>
            </g:else>

        </div>
    </div>
    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                观测指标
            </div>

            <div class="panel-body">
                <div id="myChart4" style="width: 100%;height: 380px;"></div>
            </div>

        </div>
    </div>

</div>
<asset:javascript src="echarts/echarts-all-3.js" />
<script>
    var id = ${params.id};
    var data1 = [];
    var data2 = [];
    var data3 = [];
    if(id=='3'){
        data1 = ['番禺区','花都区','增城区','南沙区','荔湾区','黄埔区','天河区','白云区','海珠区','越秀区','从化区'];
        data2 = [90,70,70,67,63,61,59,53,50,42,33];
        data3 = [{name:'番禺区',value:1690},{name:'花都区',value:1570},{name:'增城区',value:1470},{name:'南沙区',value:1370},{name:'荔湾区',value:1270},{name:'黄埔区',value:1170},{name:'天河区',value:1070},{name:'白云区',value:970},{name:'海珠区',value:870},{name:'越秀区',value:730},{name:'从化区',value:423}];
    }else{
        data1 = ['东城区','通州区','顺义区','朝阳区','海淀区'];
        data2 = [90,70,70,67,63];
        data3 = [{name:'东城区',value:1690},{name:'通州区',value:1570},{name:'顺义区',value:1470},{name:'朝阳区',value:1370},{name:'海淀区',value:1370}];
    }
    var myChart = echarts.init($('#myChart4').get(0));
    var option4 = {
        tooltip : {
            trigger: 'item'
        },
        title: [{
            subtext: '小区占比覆盖率(百分比)',
            left: '1%',
            top: '3%',
            textStyle: {
                color: '#333'
            },

        }, {
            subtext: '城市占比覆盖率(百分比)',
            left: '83%',
            top: '6%',
            textAlign: 'center',
            textStyle: {
                color: '#ff733f'
            }
        }],
        grid: {
            left: '1%',
            right: '35%',
            top: '16%',
            bottom: '6%',
            containLabel: true
        },
        yAxis:  {
            type: 'value',
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 0
            },
            data : data1
        },
        series: [
            {
                name:'数量',
                type:'bar',
                data:data2,
                tooltip : {
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },
            {
                type: 'pie',
                name: '押品数量',
                center: ['83%', '53%'],
                radius : '40%',
                data:data3,
                tooltip : {
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}'
                        }
                    }
                }
            }



        ]
    };
    myChart.setOption(option4);
    window.onresize = function () {
        myChart.resize()
    };
</script>
</body>
</html>
